<template>
  <div>
    <van-nav-bar title="砍价列表" fixed left-arrow>
      <template #left>
        <van-icon name="arrow-left" color="gray"  @click="Onclick"/>
      </template>
    </van-nav-bar>
    <div class="box">
    </div>
    <div
      v-for="(item, index) in Barlist.slice(9, 14)"
      :key="index"
      class="Bargaining"
    >
      <div class="Bargaining_box">
        <div class="Bargaining_boxLeft">
          <div class="Bargaining_boxLeft_img">
            <img :src="item.pic" alt="" />
          </div>
        </div>
        <div class="Bargaining_boxRight">
          <p class="Bargaining_boxRight_font">{{ item.name }}</p>
          <p class="Bargaining_boxRight_fontTitle">{{ item.characteristic }}</p>
          <ol class="Bargaining_Ol">
            <li>
              <p class="Bargaining_Ol_title">￥{{ item.minPrice }}</p>
              <p class="Bargaining_Ol_title_font">低价</p>
            </li>
            <li>
              <p class="Bargaining_Ol_titles">￥{{ item.originalPrice }}</p>
              <p class="Bargaining_Ol_titlez">原价</p>
            </li>
            <li></li>
            <li>
              <p class="Bargaining_Ol_titles">{{ item.stores }}件</p>
              <p class="Bargaining_Ol_titlez">限量</p>
            </li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      Barlist: [],
    };
  },
  created() {
    this.$Acc.YanxuanList().then((res) => {
      // console.log(res.data.data);
      this.Barlist = res.data.data;
    });
  },
  methods:{
     Onclick(){
        this.$router.go(-1)
     }
  }
};
</script>
<style scoped>
.Bargaining_topTitle {
  width: 100%;
  height: 3rem;
  background-color: rgb(255, 255, 255);
  font-size: 1.1rem;
  line-height: 3rem;
  border-bottom: 0.08rem solid gainsboro;
  text-align: center;
}
.Bargaining_icon {
  padding-top: 1rem;
  font-size: 0.9rem;
}
.Bargaining {
  width: 100%;
}
.Bargaining_box {
  width: 100%;
  height: 8.5rem;
  display: flex;
  margin-top: 0.5rem;
  border-bottom: 0.05rem solid gainsboro;
  margin-bottom: 0.5rem;
}
.Bargaining_boxLeft {
  width: 35%;
  height: 8rem;
  margin-left: 1%;
}
.Bargaining_boxLeft_img {
  width: 100%;
  height: 8rem;
}
.Bargaining_boxLeft_img img {
  width: 100%;
  height: 100%;
  border-radius: 1rem;
}
.Bargaining_boxRight {
  width: 55%;
  height: 8rem;
  margin-left: 1rem;
}
.Bargaining_boxRight_font {
  font-size: 0.9rem;
}
.Bargaining_boxRight_fontTitle {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  color: rgb(184, 179, 179);
}
.Bargaining_Ol {
  width: 100%;
  height: 4rem;
  margin-top: 2.1rem;
}
.Bargaining_Ol li {
  float: left;
  margin-left: 1rem;
  text-align: center;
}
.Bargaining_Ol_title {
  color: red;
  font-weight: 600;
  font-size: 0.9rem;
}
.Bargaining_Ol_title_font {
  font-size: 1rem;
  margin-top: 0.6rem;
}
.Bargaining_Ol_titles {
  font-size: 1rem;
  color: rgb(184, 179, 179);
}
.Bargaining_Ol_titlez {
  font-size: 1rem;
  margin-top: 0.5rem;
  color: rgb(184, 179, 179);
}
.box{
   width: 100%;
   height: 3.5rem;
}
</style>